<!DOCTYPE html>
<html>
	<head>
		<title><%= h yield(:title) %></title>
		<script type="text/javascript" src="html5.js"></script>
  		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<!--<%= stylesheet_link_tag   "test", :media => "all" %>-->
		<%= stylesheet_link_tag   "style", :media=> "all"%>

		<%= csrf_meta_tags %>
		<%= javascript_include_tag :default %>
		<%= javascript_include_tag 'jquery.min.js','jquery_ujs' %>

		<script>
			function clearDefault(name) {
				name.value = ""
			}
			function setLang (lang) {
				var url = window.location.href;
	
				if (url.indexOf("?")>-1){
					url = url.substr(0,url.indexOf("?"));
				}
				window.location = "/book/language?lang="+lang+"&url="+url;
				}
			function loadLang() {
				var url = window.location.href;

					if (url.indexOf("?")>-1){
					url = url.substr(0,url.indexOf("?"));
					}<%if session[:language]== "vi"%>
					window.location = url + "?lang=vi";
					<%else%>
					window.location = url;
					<%end%>
				}
		</script>
	<!--Begin Slider -->
		<style type="text/css">
			#wrap-slide{
			margin: 0 auto;
			padding: 0px 0px;
			width: 900px;
			height: 260px;			
			-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3);
			-moz-box-shadow: 0 0 4px rgba(0,0,0,0.3);
			}
			#slideshow{
			position: relative;
			width: 900px; height: 300px;
			}
			
			#slideshow li img{
			position: absolute;
			top: 0; left: 0;
			z-index: 0;
			height: 300px;
			}
			#slideshow li p{
			position: absolute;
			bottom:0; left:0;
			z-index: 0;
			width: 100%; height: 50px;
			color: #efefef;
			text-shadow: 0px 0px 2px #000;
			background: rgba(0,0,0,0.3);
			filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=1, StartColorStr='#70000000', EndColorStr='#70000000');
			}
			#slideshow li p span{
			padding: 5px 10px;
			display: block;
			}
			#slideshow li p a{
			color: #efefef;
			text-decoration: none;
			}
			#slideshow li p a:hover{
			color: #ffff00;
			}
			#slideshow .current img, #slideshow .current p{z-index: 50;}
			#controlNav{
			position: absolute;
			top:0; right:0;
			z-index: 1000;
			padding: 5px;
			}
			#controlNav a{
			display: block; float: left;
			width:22px; height:22px;
			background:url(/bullets.png) no-repeat;
			cursor: pointer;
			}
			.active{
			background-position:0 -22px !important;
			}
					
		</style>
		<script type="text/javascript">
/*
--Do not remove this if you are using--
-Author: Van Khuong
-Author URL: http://www.sothichweb.com
-Published date: 2012/06/21
-Tutorial: http://sothichweb.com/article/slider_don_gian_voi_jQuery/03d05da
*/
	$(document).ready(function(){
		vk_slideshow(5000);

	});

	function slideshow(prev){
		var slides = $('#slideshow li');
		var currElem = slides.filter('.current');
		var lastElem = slides.filter(':last');
		var firstElem = slides.filter(':first');

		// Xác định phần tử kế tiếp là prev hay next
		var nextElem = (prev)? currElem.prev() : currElem.next();
		if(prev){
			if(firstElem.attr('class') == 'current') nextElem = lastElem;
		}else if(lastElem.attr('class') == 'current')nextElem = firstElem;
		
		fadeElem(currElem,nextElem);
		widegetStatus(slides);
	}

	function wideget(index){
		var slides = $('#slideshow li');
		var currElem = slides.filter('.current');
		var nextElem = slides.eq(index);

		fadeElem(currElem,nextElem);
		widegetStatus(slides);
	}

	function widegetStatus(slides){
		slides.each(function(index){
			if($(this).attr('class') == 'current')
				$('#controlNav a').removeClass('active').eq(index).addClass('active');
		});
	}

	function fadeElem(currElem,nextElem){
	if(!$.browser.msie){
		currElem.removeClass('current').find('img') .css({'z-index':'50'}) .end() .find('p') .css({'z-index':'50'});
		nextElem.addClass('current').find('img') .css({'opacity': '0','z-index':'100'}) .animate({opacity: 1}, 700, function(){
			currElem.find('img') .css({'z-index': '0'});
		}).end().find('p') .css({'height':'0','z-index':'100','opacity': '0'}).delay(700).animate({height: 50,opacity: 1},500, function(){
			currElem.find('p') .css({'z-index': '0'});
		});
	}else{
		currElem.removeClass('current').find('img') .css({'z-index':'50'}) .end() .find('p') .css({'z-index':'50'});
		nextElem.addClass('current').find('img') .css({'opacity': '0','z-index':'100'}) .animate({opacity: 1}, 700, function(){
			currElem.find('img') .css({'z-index': '0'});
		}).end().find('p') .css({'height':'0','z-index':'100'}).delay(700).animate({height: 50},500, function(){
			currElem.find('p') .css({'z-index': '0'});
		});
	}
	}

	function vk_slideshow(time){
		var idset =setInterval('slideshow()', time);
		var liarr =$('#slideshow ul li');
		var controlNav =$('#controlNav');
		var str='';
		for(var i=0; i<liarr.length; i++){
			str+='<a></a>';
		}
		controlNav.append(str);
		controlNav.children().each(function(index){
			$(this).click(function(){
				wideget(index);clearInterval(idset);
				idset =setInterval('slideshow()', time);
			});
		}).eq(0).addClass('active');

		$('#next').click(function(){
			slideshow(); clearInterval(idset);
			idset =setInterval('slideshow()', time);
		});
		$('#prev').click(function(){
			slideshow(true); clearInterval(idset);
			idset =setInterval('slideshow()', time);
		});
	}
</script>
<!--End Slider -->
	</head>
	<body>

		<div id="wrap">
				<!--<div class="logo">
				<a href="/homepage"><img src="/logo.gif" alt="" title="" border="0" /> </a>
				</div>-->
				<div id="wrap-slide">
					<div id="slideshow">
					  <ul>
					   <li class="current"><img src="/uploads/slide_show/1.jpg" width="900" heigth ="300" /></li>
					   <li><img src="/uploads/slide_show/2.jpg" width="900" heigth ="300"  /></li>
					   <li><img src="/uploads/slide_show/3.jpg" width="900" heigth ="300"  /></li>
					   <li><img src="/uploads/slide_show/4.jpg" width="900" heigth ="300"  /></li>
   				 	   <li><img src="/uploads/slide_show/5.jpg" width="900" heigth ="300"  /></li>
   				 	   <li><img src="/uploads/slide_show/6.jpg" width="900" heigth ="300"  /></li>
					   <li><img src="/uploads/slide_show/7.jpg" width="900" heigth ="300"  /></li>
						<li><img src="/uploads/slide_show/8.jpg" width="900" heigth ="300"  /></li>
					  </ul>
					  <p id="controlNav"></p>
					</div>
				

			</div>
			
				<div id="menu">
					<ul>
						<li >
							<%if session[:language] == "vi"%>
							<a href="/homepage?lang=vi" title="Home" ><%= t :home %></a>
							<%else%>
							<a href="/homepage" title="Home" ><%= t :home %></a>
							<%end%>
						</li>

						<% userObj=session[:user]%>

						<%if userObj == nil%>
						<li>
							<%if session[:language]== "vi"%>
							<a href="/users/sign_in?lang=vi" title="Librarian LOGIN" ><%= t :login %></a>
							<%else%>
							<a href="/users/sign_in" title="Librarian LOGIN" ><%= t :login %></a>
							<%end%>
						</li>
						<br />
						<%else%>
						<%if userObj.role == "member"%>
						<li>
							<%if session[:language]== "vi"%>
							<a href="/borrow_books?lang=vi" title="Borrow" ><%= t :history %></a>
							<%else%>
							<a href="/borrow_books" title="Borrow" ><%= t :history %></a>
							<%end%>
						</li>
						<%elsif userObj.role == "admin"%>
						<li>
							<%if session[:language]== "vi"%>
							<a href="/books?lang=vi" title="BooksManager" ><%= t :booksmanager%></a>
							<%else%>
							<a href="/books" title="BooksManager" ><%= t :booksmanager%></a>
							<%end%>
						</li>
						<li>
							<%if session[:language]== "vi"%>
							<a href="/borrow_books?lang=vi" title="BorrowManager" ><%= t :borrowmanager%></a>
							<%else%>
							<a href="/borrow_books" title="BorrowManager" ><%= t :borrowmanager%></a>
							<%end%>
						</li>
						<li>
							<%if session[:language]== "vi"%>
							<a href="/managerusers?lang=vi" title="UserManager" ><%= t :usermanager%></a>
							<%else%>
							<a href="/managerusers" title="UserManager" ><%= t :usermanager%></a>
							<%end%>
						</li>
						
						<%end%>
						<li>
							<%if session[:language]== "vi"%>
							<a href="<%= user_profile_path(userObj.id) %>?lang=vi" title="myaccount" ><%= t :myaccount %></a>
							<%else%>
							<a href="<%= user_profile_path(userObj.id) %>" title="myaccount" ><%= t :myaccount %></a>
							<%end%>
						</li>
						<li>
							<%= link_to( t("signout"), destroy_user_session_path, :method => "delete") %>
						</li>
						<%end%>
					</ul>
				</div> 
			<div class="center_content">

				<div id="container">
					<h2><%= t :search %></h2>
					<%if session[:language] == "vi"%>
						<%= form_tag('/search?lang=vi',:method => :post) do%>
						<input type="hidden" value="-PBYR" name="sort_by">
						<input type="hidden" value="search" name="query_type">
						<input type="hidden" value="ALL" name="library">
						<label for="srchfield1">
							<select class="select1" name="search1"  = "<%= @value_con %>">
								<% if(@value_con == "1")%>
								<option value="1" selected><%= t :title %></option>
								<% else%>
								<option value="1" selected><%= t :title %></option>
								<%end%>
								<% if(@value_con == "2")%>
								<option value="2" selected><%= t :author %></option>
								<% else%>
								<option value="2"><%= t :author %></option>
								<%end%>
								<% if(@value_con == "3")%>
								<option value="3" selected><%= t :pubisher %></option>
								<% else%>
								<option value="3"><%= t :publisher %></option>
								<%end%>
								<% if(@value_con == "4")%>
								<option value="4" selected><%= t :type %></option>
								<% else%>
								<option value="4"><%= t :type %></option>
								<%end%>
							</select> </label>
						<label for="searchdata1">
							<input id="searchdata1" class="search1-input" type="text" onblur="resinstateDefault(this)" onfocus="clearDefault(this)" value="<%= @value_search %>" maxlength="300" name="search2">
						</label>
						<input class="search1-button" type="submit" value="<%= t :go %>" name="submit">
						<%end%>
					<%else%>
						<%= form_tag('/search',:method => :post) do%>
						<input type="hidden" value="-PBYR" name="sort_by">
						<input type="hidden" value="search" name="query_type">
						<input type="hidden" value="ALL" name="library">
						<label for="srchfield1">
							<select class="select1" name="search1"  = "<%= @value_con %>">
								<% if(@value_con == "1")%>
								<option value="1" selected><%= t :title %></option>
								<% else%>
								<option value="1" selected><%= t :title %></option>
								<%end%>
								<% if(@value_con == "2")%>
								<option value="2" selected><%= t :author %></option>
								<% else%>
								<option value="2"><%= t :author %></option>
								<%end%>
								<% if(@value_con == "3")%>
								<option value="3" selected><%= t :pubisher %></option>
								<% else%>
								<option value="3"><%= t :publisher %></option>
								<%end%>
								<% if(@value_con == "4")%>
								<option value="4" selected><%= t :type %></option>
								<% else%>
								<option value="4"><%= t :type %></option>
								<%end%>
							</select> </label>
						<label for="searchdata1">
							<input id="searchdata1" class="search1-input" type="text" onblur="resinstateDefault(this)" onfocus="clearDefault(this)" value="<%= @value_search %>" maxlength="300" name="search2">
						</label>
						<input class="search1-button" type="submit" value="<%= t :go %>" name="submit">
						<%end%>
					<%end%>
				</div>
				<div style="float: right; padding-right: 30px; margin-top: -30px ">
					<a href="javascript:setLang('vi')" ><img src="/vn.jpg" height="30" width="50" style="padding-right: 10px " /></a>
					<a href="javascript:setLang('en')" ><img src="/en.png" height="30" width="50" /></a>
				</div>

				<div class="left_content">
					<%= yield %>

				</div><!--end of left content-->
				<div class="right_content">

					<!--<div class="title">
					<span class="title_icon"><img src="bullet3.gif" alt="" title="" /></span>About Our Store
					</div>-->

					<div class="right_box">
						<div class="title">
							<span class="title_icon"><img src="bullet5.gif" alt="" title="" /></span><%= t :categories%>
						</div>

						<ul class="list">
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?lang=vi"><%= t :all%></a>
								<% else %>
								<a href="/search"><%= t :all%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Arts&lang=vi"><%= t :arts%></a>
								<% else %>
								<a href="/search?search1=4&search2=Arts"><%= t :arts%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Business&lang=vi"><%= t :business%></a>
								<% else %>
								<a href="/search?search1=4&search2=Business"><%= t :business%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Comic&lang=vi"><%= t :comic%></a>
								<% else %>
								<a href="/search?search1=4&search2=Comic"><%= t :comic%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Computer&lang=vi"><%= t :computer%></a>
								
								<% else %>
								<a href="/search?search1=4&search2=Computer"><%= t :computer%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Health&lang=vi"><%= t :health%></a>
								
								<% else %>
								<a href="/search?search1=4&search2=Health"><%= t :health%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Novel&lang=vi"><%= t :novel%></a>
								<%else%>
								<a href="/search?search1=4&search2=Novel"><%= t :novel%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=History&lang=vi"><%= t :history%></a>
								
								<%else%>
								<a href="/search?search1=4&search2=History"><%= t :history%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Technology&lang=vi"><%= t :technology%></a>
								<%else%>
								
								<a href="/search?search1=4&search2=Technology"><%= t :technology%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Sport&lang=vi"><%= t :sport%></a>
								
								<%else%>
								<a href="/search?search1=4&search2=Sport"><%= t :sport%></a>
								<%end%>
							</li>
							<li>
								<%if session[:language]== "vi"%>
								<a href="/search?search1=4&search2=Travel&lang=vi"><%= t :travel%></a>
								
								<%else%>
								<a href="/search?search1=4&search2=Travel"><%= t :travel%></a>
								<%end%>
							</li>
						</ul>
						<ul class="list" style="margin-left: -30px">
							<form action="--WEBBOT-SELF--" method="POST">
								<select style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; width: 150px;" onchange="window.open(this.options[this.selectedIndex].value,'_top'); lists.options[0].selected=true" size="1" name="lists">
									<option value="Links" selected="">  -- <%= t :Partners %> -- </option>
									<option value="">=============</option>
									<option value="http://www.lib.hcmut.edu.vn/"><%= t :BKLib%></option>
									<option value="http://hcmussh.edu.vn/3cms/"><%= t :USSH%></option>
									<option value="http://nlv.gov.vn/"><%= t :SPKT%></option>
									<option value="http://nlv.gov.vn/"><%= t :NationLib%></option>
									<option value="http://lib.hui.edu.vn/?tab=pub"><%= t :HUI%></option>
									<option value="">=============</option>
								</select>
							</form>

						</ul>

					</div>

				</div><!--end of right content-->

				<div class="clear"></div>
			</div><!--end of center content-->

			<div class="footer">
				<div class="left_footer"><img src="/footer-logo.png" alt="" title="" />
					<br />
				</div>
				<div class="right_footer">
					<a href="#">home</a>
					<a href="#">about us</a>
					<a href="#">services</a>
					<a href="#">privacy policy</a>
					<a href="#">contact us</a>

				</div>

			</div>

		</div>
		</div>

	</body>
</html>
